<!--
 * @Author: your name
 * @Date: 2021-09-26 20:50:13
 * @LastEditTime: 2021-10-23 13:36:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_test\src\App.vue
-->
<template>
  <div class="app">
    <h2>{{ msg }},学生姓名是：{{ studentName }}</h2>

    <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
    <School :getSchoolName="getSchoolName"></School>
    <hr />

    <!-- 通过父组件给子组件Student的实例对象绑定atguigu自定义事件实现子给父传递数据，只要这个事件被触发了，getStudentName就会被调用(第一种写法，@或v-on) -->
    <!--  <Student v-on:atguigu="getStudentName"></Student> -->
    <!-- <Student @atguigu="getStudentName" @demo="m1"></Student> -->

    <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据(第二种写法，ref)，比较灵活 -->
    <Student ref="student" @click.native="show"></Student>
  </div>
</template>
/*  */
<script>
import School from "./components/School";
import Student from "./components/Student";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好啊！",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    getStudentName(name, ...params) {
      console.log("App收到了学生名：", name, params);
      this.studentName = name;
    },
    m1() {
      console.log("demo事件被触发了！");
    },
    show(){
      alert(123)
    }
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
    /* this.$refs.student.$once("atguigu", this.getStudentName); */ //绑定自定义事件（一次性）
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
